<template>
  <div class="header-container">
    <h3 class="header-title">大家都在问</h3>
    <el-button @click="loadMore" class="load-more-button">查看更多</el-button>
  </div>

  <div class="questions-container">
    <div class="question" v-for="(item, index) in questions.slice(0, 2)" :key="index"> <!-- 仅显示前两条问题 -->
      <div class="question-content">
        <p><strong>提问:</strong> 症状及患病时长: {{ item.content }}</p>
        <p><strong>医生回复:</strong> {{ response[index]?.content }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import router from '../router';
import axios from "axios";

const ps = `http://localhost:8000/app/`

const questions = ref([]);
const response = ref([]);

function loadMore() {
  // 这里可以添加加载更多问题的逻辑
  router.push('/loadMore_doctor_response');

}

onMounted(() => {
  axios.get(ps + `user_question/`)
      .then(res => {
        // console.log(res.data);
        questions.value = res.data;
      })
  axios.get(ps + `doctor_response`)
      .then(res => {
        // console.log(res.data);
        response.value = res.data;
      })
})

</script>

<style scoped>
.header-container {
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 使内容分别居左和居右 */
  align-items: center; /* 垂直居中对齐 */
  padding: 0 20px;
}

.questions-container {
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 每个问题块左右分配空间 */
  margin: 20px 0; /* 增加上下间距 */
}

.question {
  flex: 1; /* 每个问题块均分可用空间 */
  margin: 0 10px; /* 增加左右间距 */
  border: 1px solid #e0e0e0; /* 添加边框 */
  border-radius: 8px; /* 圆角 */
  background-color: #f9f9f9; /* 添加背景色 */
  padding: 15px; /* 内部填充 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.question-content {
  margin-bottom: 20px;
}

.question-content p {
  margin: 5px 0;
}
</style>
